<template>
    <div id='zzzhjsljqk'>
        <div class="rfdwList_box table">
            <div class='reportFormHeader'>
                <el-col :span='3'>
                    <div class='search'>
                        <el-select
                            class="noBg border1 selectYear"
                            v-model="selectYear"
                            placeholder="请选择">
                            <el-option
                                v-for="(option, index) in yearArr"
                                :key="index"
                                :label="option"
                                :value="option"
                            ></el-option>
                        </el-select>
                        <!-- <div class="ml10">
                        <el-input
                            class="noBg border1 inputYear"
                            v-model="inputYear"></el-input>
                        </div> -->
                        <!-- <div class="ml10">
                            <el-button class="btnDefault ">搜索</el-button>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span='18'>
                    <div class='tableTitle'>组织指挥建设累计情况综合统计表</div>
                </el-col>
                <el-col :span="3">
                    <div class="rightSpace"></div>
                </el-col>
            </div>
            <el-table
                 class="bbtable"
                :data='sliceData'
                border
                styel='width: 100%;height: 500px'>
                <el-table-column
                v-for="(item,index) in tableHeader"
                :key=index
                :label="item.value"
                :prop="item.index">
                <el-table-column
                    v-for="(item,index) in item.chartModel"
                    :key=index
                    :label="item.value"
                    :prop="item.index">
                    <el-table-column
                        v-for="(item,index) in item.chartModel"
                        :key=index
                        :label="item.value"
                        :prop="item.index">
                    </el-table-column>
                </el-table-column>
                </el-table-column>
            </el-table>
            <div class="page">
                <pages :page="page" @changePage="changePage"></pages>
            </div>
        </div>
    </div>
</template>

<script>
import pages from "../base/pages";
import {baseServe} from "../../request/api";

export default {
    name: "zzzhjsljqk",
        data() {
        return{
            page: {
                //总条数
                total: 30,
                //每页条数
                limit: 15,
                //当前页数
                currentPage: 1,
                pageSizes: [5, 10,15],
                //实际返回的条数
                dataLength: 7
            },
            selectYear: 2019,
            // inputYear: '',
            yearArr: [],
            sliceData: [],
            tableHeader: [],
            tableData: [],
        }
    },
    watch: {
        selectYear(){
            this.getTable()
        },
        page(){
            this.changePage()
        }
    },
    methods: {
        getYearArr(){
            this.yearArr=[]
            let year=new Date().getFullYear()
            for(let i=0;i<10 ;i++){
                this.yearArr.push(year-i)
            }
        },
        async getTable() {
            this.$store.state.loadingFlag = true;
            this.tableHeader = [];
            this.tableDate = [];
            // let res = baseServe.getTableHeaderzzzh();

            let params={
                rfdwnm: parseInt(localStorage.getItem('rfdwnm')),
                year: this.selectYear
            };
            await baseServe.getTableHeaderzzzh(params).then(res =>{
                this.tableData = res.data.tableContent
                this.tableHeader = res.data.chartModels
                this.$store.state.loadingFlag = false;
              this.page.total = this.tableData.length;
              this.page.currentPage=1
              this.pages();
            })

        },
        changePage(data) {
            this.page = data;
            this.pages();
            // this.userList1();
        },
        pages() {
            this.page.total = this.tableData.length;

            if (!this.page.total % this.page.limit) {
            this.page.currentPage = this.page.currentPage - 1;
            }
            let begin = (this.page.currentPage - 1) * this.page.limit;
            let end = this.page.currentPage * this.page.limit;
            this.sliceData = this.tableData.slice(begin, end);
            //  this.page1.total = Math.ceil(this.tableData.length / this.page1.limit);
            // 计算得0时设置为1
            // this.TreeDataList();
        },
    },
    mounted() {
        this.getYearArr()
        this.getTable()
        this.pages()
    },
    components: {
        pages,
    }
}
</script>

<style lang='less'>
    @import "../../assets/css/global.css";
    .bbtable {
        height: 610px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(5, 230, 230, 0.6);
            border-radius: 30px;
        }
    }
</style>
